<template>
  <div ref="echartWrap"></div>
</template>

<script lang="ts">
import { defineComponent, shallowRef, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
/**
 * 图表组件封装
 * @Author yuanyexu
 * @Date 2021-08-31
 */
export default defineComponent({
  name: 'Echarts',
  props: ['option'],
  emits: [],
  setup(props, ctx) {
    let echartWrap = shallowRef<any>();
    const drawCharts = () => {
      echartWrap.value = echarts.init(echartWrap.value);
      echartWrap.value.setOption(props.option);
    };
    const handleResize = () => {
      setTimeout(() => {
        echartWrap.value && echartWrap.value.resize();
      }, 10);
    };
    onMounted(() => {
      drawCharts();
      window.onresize = function() {
        handleResize();
      }
    })
    onBeforeUnmount(() => {
      window.onresize = null;
    });
    watch(
      () => props.option,
      () => drawCharts(),
    );
    return {
      echartWrap
    };
  },
});
</script>
